import { ProgressBar, Toast } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { GetUserInfo, VipPrivilegeData } from '../../api/mine'
import NavBar from '../../components/Navbar'
import './index.less'
import { compareVersions, getVersion, isIOS } from '../../utils/util'
import appSdk from '../../utils/app_sdk'
// import { useNavigate } from "react-router-dom";

// const data = [
//   {
//     title: "防骚扰",
//     desc_line_1: "陌生人屏蔽",
//     desc_line_2: "防私信轰炸",
//     icon: require("../../images/privilege_icon5.png"),
//     bg: require("../../images/privilege_bg1.png"),
//   },
//   {
//     title: "防禁言",
//     desc_line_1: "畅所欲言",
//     desc_line_2: "自由之身",
//     icon: require("../../images/privilege_icon6.png"),
//     bg: require("../../images/privilege_bg2.png"),
//   },
//   {
//     title: "防被踢",
//     desc_line_1: "随心所欲",
//     desc_line_2: "来去自如",
//     icon: require("../../images/privilege_icon7.png"),
//     bg: require("../../images/privilege_bg5.png"),
//   },
//   {
//     title: "榜单隐身",
//     desc_line_1: "财不外露",
//     desc_line_2: "幕后真凶",
//     icon: require("../../images/privilege_icon8.png"),
//     bg: require("../../images/privilege_bg6.png"),
//   },
//   {
//     title: "炫彩昵称",
//     desc_line_1: "羡煞旁人",
//     desc_line_2: "绚丽昵称",
//     icon: require("../../images/privilege_icon9.png"),
//     bg: require("../../images/privilege_bg1.png"),
//   },
//   {
//     title: "加速匹配",
//     desc_line_1: "每日额外机会",
//     desc_line_2: "心动匹配",
//     icon: require("../../images/privilege_icon4.png"),
//     bg: require("../../images/privilege_bg2.png"),
//   },
//   {
//     title: "匹配优惠",
//     desc_line_1: "匹配优惠",
//     desc_line_2: "加量不加价",
//     icon: require("../../images/privilege_icon3.png"),
//     bg: require("../../images/privilege_bg5.png"),
//   },
//   {
//     title: "魔法消息",
//     desc_line_1: "专属气泡",
//     desc_line_2: "彰显个性",
//     icon: require("../../images/privilege_icon10.png"),
//     bg: require("../../images/privilege_bg6.png"),
//   },
// ];

const backgroundLevel = (level) => {
  if (!level || level <= 0) return 0
  if (level <= 12) return 1
  if (level > 12 && level <= 24) return 2
  if (level > 24 && level <= 36) return 3
  if (level > 36 && level <= 48) return 4
  if (level > 48 && level <= 60) return 5
}

function VipPrivilege() {
  // const navigate = useNavigate()
  const [userInfo, setUserInfo] = useState({ headimgurl: '', wealth_level: 0 })
  const [levelData, setLevelData] = useState({
    stageLevel: 0,
    diff: 0,
    exp: 0,
    wealth: 0
  })
  console.log('update')
  const getUser = async () => {
    Toast.show({
      title: '加载中...',
      icon: 'loading'
    })
    const user = await GetUserInfo()
    setUserInfo(user.data)
    const { data } = await VipPrivilegeData()
    setLevelData(data)
    Toast.clear()
  }

  const [barHeight, setBarHeight] = useState(0)
  useEffect(() => {
    getUser()
    console.log(
      `%c Version = ${getVersion() || '1.0.0'} %c`,
      'background:#41b883 ; padding: 4px; border-radius: 4px;  color: #fff',
      'background:transparent'
    )
    if (compareVersions(getVersion() || '1.0.0', '2.2.0') !== -1) {
      appSdk('setFullScreen', 1)
      if (window?.android && window?.android?.getStatusBarHeight) {
        if (window.android.getStatusBarHeight()) {
          setBarHeight(window.android.getStatusBarHeight() / window.devicePixelRatio)
        }
        console.log('拿到状态栏高度', window.android.getStatusBarHeight(), window.devicePixelRatio)
      } else if (isIOS()) {
        appSdk('getStatusBarHeight', null, (res) => {
          console.log('拿到ios状态栏高度', res, window.devicePixelRatio)
          setBarHeight(res / window.devicePixelRatio)
        })
      }
    }
  }, [])

  return (
    <div className={`VipPrivilege_wrap vip level_${backgroundLevel(+userInfo.wealth_level || 0)}`}>
      <NavBar
        title="财富特权"
        style={{
          paddingTop: barHeight || 0
        }}
      />
      <div className={`VipPrivilege_content level_${backgroundLevel(+userInfo.wealth_level || 0)}`}>
        <div className={`vip_card level_${backgroundLevel(+userInfo.wealth_level || 0)}`}>
          <div className="userinfo">
            {/* <div className="avatar">
              <img src={userInfo.headimgurl} alt="" />
            </div> */}
            <div className="username">{userInfo?.nickname}</div>
          </div>
          {userInfo?.wealth_level ? (
            <div className="progress">
              <div className="progress_data">
                <span>{`${levelData.wealth}/${levelData.nextWealth}`}</span>
                <ProgressBar
                  percent={+(levelData.wealth / levelData.nextWealth) * 100}
                  style={{
                    '--fill-color': 'linear-gradient(to left, #FFFFFF 0%, rgba(255, 255, 255, 0) 97.22%)',
                    '--track-color': 'rgba(255,255,255,0.2)',
                    padding: '4px 0 4px 0'
                  }}
                />
                <span>
                  {/* 距Lv{levelData.stageLevel + 1}还差{levelData.diff}成长值 */}
                  距升级还差{levelData.diff}成长值
                </span>
              </div>
            </div>
          ) : (
            <div className="un_vip">暂未解锁财富特权</div>
          )}
        </div>
        <div className="vip_privilege">
          <div className="privilege_tit">会员等级特权</div>
          <div className="privileges">
            <div className={`privilege_item a`}>
              <div className="privilege_item_icon"></div>
              <div className="privilege_item_t">财富勋章</div>
              <div className="privilege_item_text">
                尊贵身份
                <br />
                一眼识别
              </div>
            </div>
            <div className={`privilege_item b`}>
              <div className="privilege_item_icon"></div>
              <div className="privilege_item_t">财富装扮</div>
              <div className="privilege_item_text">
                财富专属座驾
                <br />
                绚丽进场展示
              </div>
            </div>
            <div className={`privilege_item c`}>
              <div className="privilege_item_icon"></div>
              <div className="privilege_item_t">专属礼物</div>
              <div className="privilege_item_text">
                专属财富礼物
                <br />
                轻松送礼
              </div>
            </div>
            {/* 占位 */}
            <div className="privilege_item"></div>
          </div>
        </div>
        {/* <div className="vip_privilege" style={{ marginTop: 12 }}>
          <div className="privilege_tit">更多财富权限</div>
          <div className="privileges">
            {data.map((item, idx) => (
              <div
                className={`privilege_item a`}
                key={String(idx)}
                style={{
                  background: `url(${item.bg}) no-repeat`,
                  backgroundSize: "contain",
                }}
              >
                <div className="privilege_item_icon">
                  <img src={item.icon} alt="" />
                </div>
                <div className="privilege_item_t">{item.title}</div>
                <div className="privilege_item_text">
                  {item.desc_line_1}
                  <br />
                  {item.desc_line_2}
                </div>
              </div>
            ))}
          </div>
        </div> */}
      </div>
    </div>
  )
}

export default VipPrivilege
